<template>
  <div id="styles" v-html="'<style>' + store.stylesheet +'</style>'"></div>
  <div id="pdf-loading" v-if="loading">
    <div>表格正在加载中……请稍后</div>
    <icon-loading/>
    <div class="logo">
      <img src="logo.png" width="90" draggable="false"/>
    </div>
  </div>
  <div id="container" :style="{visibility: loading ? 'hidden' : 'visible'}">
    <template v-for="(html, index) in store.html">
      <div v-if="index === sheetIndex" class="excel-sheet animate__animated animate__bounceInLeft" :class="mode"
           :style="{zoom: currentScale}">
        <div v-html="html"></div>
      </div>
    </template>
  </div>
  <div class="control">
      <span style="font-size: 14px;margin-right: 40px;" class="hidden-xs-only">
        <span style="font-size: 12px;vertical-align: text-bottom">
          <file-type-icon :file-name="store.fileName"/></span>
        <ellipsis :text="store.fileName" :length="25"></ellipsis>
      </span>
    <span style="font-size: 12px;margin-right: 10px;" class="hidden-sm-and-up">
        <span style="font-size: 12px;vertical-align: text-bottom">
          <file-type-icon :file-name="store.fileName"/></span>
        <ellipsis :text="store.fileName" :length="6"></ellipsis>
      </span>
    <a-slider class="hidden-xs-only" style="margin-right: 20px" v-model="currentScale" :min="0.5" :max="2"
              :step="0.1" :style="{ width: '200px' }"/>
    <a-button-group style="float: right">
      <a-button size="small" @click="fitScreen">
        <icon-fullscreen v-if="currentScale !== fitWidth"/>
        <icon-shrink v-if="currentScale === fitWidth"/>
      </a-button>
      <a-button size="small" @click="switchMode">
        <icon-skin v-if="mode === 'original'"/>
        <icon-desktop v-if="mode === 'responsive'"/>
      </a-button>
      <a-button size="small" @click="pdfMode">
        <template #icon>
          <div style="font-size: 7px; padding-left: 8px; margin-top: -5px">
            <file-type-icon :file-name="'*.pdf'"></file-type-icon>
          </div>
        </template>
      </a-button>
      <a-button size="small" @click="download">
        <icon-download/>
      </a-button>
      <a-button size="small" @click="scaleUp()" class="hidden-xs-only">
        <icon-plus/>
        放大
      </a-button>
      <a-button size="small" @click="scaleDown()" class="hidden-xs-only">
        <icon-minus/>
        缩小
      </a-button>
      <a-button size="small" status="danger" @click="back">
        <icon-close/>
        退出
      </a-button>
    </a-button-group>
  </div>
  <div class="tabs">
    <a-tabs type="capsule" @change="change">
      <a-tab-pane :key="index" v-for="(sheetName, index) in store.sheetNames">
        <template #title>
          <icon-nav/>
          {{ sheetName }}
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import useGlobalStore from "../../store";
import {ref} from "vue";
import router from "../../router";

export default {
  name: "index",
  setup() {
    const store = useGlobalStore();
    const loading = ref(true);
    return {
      store,
      loading
    }
  },
  data() {
    return {
      currentScale: 1,
      fitWidth: 0,
      sheetIndex: 0,
      mode: 'original'
    }
  },
  mounted() {
    if (!this.store.pdfUrl) {
      this.back();
    } else {
      setTimeout(() => {
        this.fitScreen();
        this.loading = false;
      }, 500);
    }
  },
  methods: {
    fitScreen() {
      if (this.currentScale !== this.fitWidth) {
        const tableWidth = document.querySelector(".excel-sheet").scrollWidth + 120;
        const innerWidth = window.innerWidth;
        this.currentScale = Math.min(Math.max(innerWidth / tableWidth, 0.5), 2);
        this.fitWidth = this.currentScale;
      } else {
        this.currentScale = 1;
      }
    },
    scaleUp() {
      this.currentScale += 0.1;
      if (this.currentScale > 2) {
        this.currentScale = 2;
      }
    },
    scaleDown() {
      this.currentScale -= 0.1;
      if (this.currentScale < 0.5) {
        this.currentScale = 0.5;
      }
    },
    download() {
      const orignalUrl = this.store.originalUrl;
      window.open(orignalUrl);
    },
    back() {
      this.$router.back();
    },
    switchMode() {
      this.mode = this.mode === 'original' ? 'responsive' : 'original';
      if (this.mode === 'responsive') {
        this.zoom = 1;
      }
    },
    pdfMode() {
      router.push('/online/pdf');
    },
    change(index) {
      this.sheetIndex = parseInt(index);
    }
  }
}
</script>

<style lang="less" scoped>

#pdf-loading {
  position: absolute;
  width: 200px;
  height: 150px;
  line-height: 50px;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  margin: auto;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#container {
  margin-top: 20px;
  padding: 20px;
  width: calc(100vw - 50px);
  overflow-x: auto;
}

.excel-sheet {
  width: fit-content;
  height: 100%;
  margin: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  z-index: 999;
}

.control {
  position: fixed;
  top: 5px;
  right: 5px;
  z-index: 999;
  background: var(--color-bg-1);
  padding: 5px 10px;
  border-radius: 4px;
}

.tabs {
  position: fixed;
  bottom: 5px;
  left: 20px;
  z-index: 999;
  background: var(--color-bg-1);
  max-width: calc(100vw - 40px);
  overflow: auto;
  padding: 5px 10px;
  border-radius: 4px;
}
</style>
